
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang='zh-CN'>\n        <head >\n        <meta charset='UTF-8'/>\n<meta name='viewport' content='width=device-width, initial-scale=1.0'/>\n<title >智能问答 - 登录</title>\n<script src='https://res.gemcoder.com/js/reload.js'><\/script>\n<script src='https://cdn.tailwindcss.com'><\/script>\n<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>\n<script >tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#4F46E5',\n        secondary: '#8B5CF6',\n        neutral: '#6B7280',\n        light: '#F3F4F6'\n      },\n      fontFamily: {\n        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']\n      }\n    }\n  }\n};<\/script>\n<style type='text/tailwindcss'>\n        @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .gradient-btn {\n                background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 100%);\n            }\n            .input-focus {\n                @apply border-primary ring-1 ring-primary;\n            }\n            .icon-gray {\n                @apply text-neutral;\n            }\n        }\n    </style>\n    \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n<body class='bg-gray-50 min-h-screen flex items-center justify-center p-4 font-sans'>\n        <div class='w-full max-w-md bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl'>\n        <!-- 顶部区域 -->\n<div class='pt-12 pb-8 px-6 flex flex-col items-center'>\n        <div class='w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mb-4'>\n        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/8313e31796ee63a9f61f9eac344d75b5.png' alt='智能问答应用图标' class='w-full h-full object-contain'/>\n    </div>\n<h1 class='text-[clamp(1.5rem,4vw,2rem)] font-bold text-gray-800'>\n        智能问答\n    </h1>\n    </div>\n<!-- 输入框区域 -->\n<div class='px-8 pb-8'>\n        <form id='loginForm' class='space-y-5'>\n        <!-- 手机号/邮箱输入框 -->\n<div class='relative'>\n        <div class='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>\n        <i class='fas fa-phone-alt icon-gray text-lg'>\n        </i>\n    </div>\n<input type='text' id='username' placeholder='请输入手机号或邮箱' class='w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:input-focus transition-all duration-200' required/>\n    </div>\n<!-- 密码输入框 -->\n<div class='relative'>\n        <div class='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>\n        <i class='fas fa-lock icon-gray text-lg'>\n        </i>\n    </div>\n<input type='password' id='password' placeholder='请输入密码' class='w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:outline-none focus:input-focus transition-all duration-200' required/>\n<button type='button' id='togglePassword' class='absolute inset-y-0 right-0 pr-3 flex items-center text-neutral hover:text-primary transition-colors duration-200'>\n        <i class='fas fa-eye-slash text-lg'>\n        </i>\n    </button>\n    </div>\n<!-- 忘记密码链接 -->\n<div class='flex justify-end'>\n        <a href='javascript:void(0);' class='text-primary text-sm hover:text-secondary transition-colors duration-200'>\n        忘记密码?\n    </a>\n    </div>\n<!-- 登录按钮 -->\n<button type='submit' class='gradient-btn w-full py-3.5 rounded-xl text-white font-medium text-lg shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2'>\n        登录\n    </button>\n    </form>\n    </div>\n<!-- 其他登录方式 -->\n<div class='px-8 pb-12'>\n        <div class='flex items-center my-6'>\n        <div class='flex-grow h-px bg-gray-200'>\n        </div>\n<span class='px-4 text-gray-500 text-sm'>\n        其他登录方式\n    </span>\n<div class='flex-grow h-px bg-gray-200'>\n        </div>\n    </div>\n<div class='flex justify-center space-x-8'>\n        <a href='javascript:void(0);' class='w-12 h-12 rounded-full bg-[#07C160] flex items-center justify-center text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300'>\n        <i class='fab fa-weixin text-xl'>\n        </i>\n    </a>\n<a href='javascript:void(0);' class='w-12 h-12 rounded-full bg-[#1DA1F2] flex items-center justify-center text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300'>\n        <i class='fab fa-twitter text-xl'>\n        </i>\n    </a>\n<a href='javascript:void(0);' class='w-12 h-12 rounded-full bg-black flex items-center justify-center text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300'>\n        <i class='fab fa-apple text-xl'>\n        </i>\n    </a>\n    </div>\n    </div>\n<!-- 底部注册信息 -->\n<div class='px-8 pb-10 text-center'>\n        <p class='text-gray-600'>\n        还没有账号？\n<a href='javascript:void(0);' class='text-primary font-medium hover:text-secondary transition-colors duration-200'>\n        立即注册\n    </a>\n    </p>\n    </div>\n    </div>\n<script >// 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 获取DOM元素\n  var togglePassword = document.getElementById('togglePassword');\n  var passwordInput = document.getElementById('password');\n  var loginForm = document.getElementById('loginForm');\n\n  // 密码显示/隐藏切换\n  togglePassword.addEventListener('click', function () {\n    // 切换类型\n    var type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\n    passwordInput.setAttribute('type', type);\n\n    // 切换图标\n    var icon = togglePassword.querySelector('i');\n    if (type === 'password') {\n      icon.classList.remove('fa-eye');\n      icon.classList.add('fa-eye-slash');\n    } else {\n      icon.classList.remove('fa-eye-slash');\n      icon.classList.add('fa-eye');\n    }\n  });\n\n  // 表单提交处理\n  loginForm.addEventListener('submit', function (e) {\n    e.preventDefault();\n\n    // 获取表单数据\n    var username = document.getElementById('username').value;\n    var password = passwordInput.value;\n\n    // 简单验证\n    if (!username || !password) {\n      alert('请输入完整的登录信息');\n      return;\n    }\n\n    // 模拟登录请求\n    simulateLogin(username, password);\n  });\n\n  // 输入框聚焦效果\n  var inputs = document.querySelectorAll('input');\n  inputs.forEach(function (input) {\n    input.addEventListener('focus', function () {\n      input.parentElement.classList.add('scale-[1.01]');\n      input.parentElement.style.transition = 'transform 0.2s ease';\n    });\n    input.addEventListener('blur', function () {\n      input.parentElement.classList.remove('scale-[1.01]');\n    });\n  });\n});\n\n// 模拟登录函数\nfunction simulateLogin(username, password) {\n  // 显示加载状态\n  var loginButton = document.querySelector('button[type=\"submit\"]');\n  var originalText = loginButton.innerHTML;\n  loginButton.disabled = true;\n  loginButton.innerHTML = \"<i class=\\\"fas fa-spinner fa-spin mr-2\\\" data-ytId=\\\"id-yviyn\\\"></i>\\u767B\\u5F55\\u4E2D...\";\n\n  // 模拟API请求延迟\n  setTimeout(function () {\n    // 这里可以添加实际登录逻辑\n    console.log('登录信息:', {\n      username: username,\n      password: password\n    });\n    alert('登录成功！');\n\n    // 恢复按钮状态\n    loginButton.disabled = false;\n    loginButton.innerHTML = originalText;\n\n    // 可以在这里添加页面跳转逻辑\n    // window.location.href = 'home.html';\n  }, 1500);\n}<\/script>\n    </body>\n    </html>";
        iframe.srcdoc = html;
    });
</script>
</html>
